<template>
  <div>
    <el-row>
      <el-button type="primary" round @click="add">新增<i class="el-icon-plus"></i></el-button>
      <el-button type="info" round @click="refresh">刷新<i class="el-icon-refresh-right"></i></el-button>
      <el-input v-model="input"  prefix-icon="el-icon-search" placeholder="请输入要搜索的内容" class="input-container"></el-input>
      <el-button type="primary" plain style="margin-left: 10px" @click="search"><i class="el-icon-search"></i>搜索</el-button>
    </el-row>

<!--    角色列表-->
    <div>
    <el-table :data="tableData" v-loading="tableLoading" border style="width: 100%" >
      <el-table-column fixed prop="id" label="角色编号" width="200"></el-table-column>
      <el-table-column prop="roleName" label="角色" width="200"></el-table-column>
      <el-table-column  label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="update(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

      <el-pagination
          class="mpage"
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="refresh"
          >
      </el-pagination>
  </div>



    <el-drawer title="" :visible.sync="drawer" :wrapperClosable="false">
      <div>
        <el-form v-loading="drawerLoading" ref="form" :model="roleData" label-width="80px">
          <!-- 隐藏域，用于保存id-->
          <el-input type="hidden" v-model="roleData.id"></el-input>

          <el-form-item label="角色">
            <el-input type="text" v-model="roleData.roleName"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="save">提交</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

  </div>
</template>

<script>
export default {
  data() {
    return {
      total:0,
      pageSize:10,
      currentPage:1,
      drawer:false,
      tableLoading: false,
      drawerLoading: false,
      input: '',
      tableData:[],
      roleData: { roleId: 0, roleName: ""},
    }
  },
  methods:{
    async refresh(currentPage) {

      const _this = this
      this.tableLoading = true
      let result = await this.$http.get("/role/page?currentPage="+currentPage, { showMessage: true })
      console.log(result)
      // _this.currentPage = result.data.data.current
      // _this.total = res.data.data.total
      // _this.pageSize = res.data.data.size
      this.tableData = result.data.records
      _this.total = result.data.total
      _this.pageSize = result.data.size
      this.tableLoading = false
    },

    async add() {
      this.roleData.roleName = ""
      this.drawer = true
      this.drawerLoading = true
      console.log("123456")
      this.drawerLoading = false
    },

    async save() {
      let result = await this.$http.post('/role', this.roleData)
      this.$message.info("保存成功")
      this.drawer = false
      this.refresh()
    },

    async update(row) {
      this.drawer = true
      this.drawerLoading = true
      let result = await this.$http.get('/role/' + row.id)
      this.roleData = result.data
      this.drawerLoading = false
      this.refresh()
    },

    async search() {
      this.tableLoading = true
      console.log(this.input)
      let result = await this.$http.get('/role/search?roleName='+this.input)
      console.log("111111")
      console.log(result)
      this.tableData = result.data
      this.tableLoading = false
    },

    remove(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let result = await this.$http.delete('/role/' + row.id)
        this.$message.success("删除成功")
        this.refresh()
      });
    },

    cancel() {
      this.$refs.form.resetFields()
      this.drawer = false
    },

  },

  mounted: function () {
    this.refresh(1)
  }
}
</script>

<style lang="less" scoped>
.input-container{
  width: 250px;
  margin-left: 20px;
}
.mpage{
  margin: 0 auto;
  text-align: center;
}
</style>
